<template>
    <div class="card-box">
        <div v-for="item in cardList" :key="item.id" class="item">
            <div class="icon">
                <n-icon :size="38" :color="item.icon.color">
                    <component :is="item.icon.com"></component>
                </n-icon>
            </div>
            <div class="text-num">
                <div class="text">{{ item.name }}</div>
                <div class="num">
                    <n-number-animation :from="0" :to="item.num" />
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import {
    PersonCircle,
    LogoYen,
    ChatboxEllipses,
    Cart
} from '@vicons/ionicons5';
import { ref } from 'vue';

const cardList = ref([
    {
        id: '1',
        icon: {
            com: PersonCircle,
            color: '#3FC9C6'
        },
        name: 'New Visits',
        num: 102444
    },
    {
        id: '2',
        icon: {
            com: ChatboxEllipses,
            color: '#38A3F7'
        },
        name: 'Messages',
        num: 150093
    },
    {
        id: '3',
        icon: {
            com: LogoYen,
            color: '#F4516B'
        },
        name: 'Purchase',
        num: 23956
    },
    {
        id: '4',
        icon: {
            com: Cart,
            color: '#3ABFA3'
        },
        name: 'Shopping',
        num: 565533
    }
]);
</script>
<style lang="less" scoped>
.card-box {
    display: flex;
    gap: 16px;

    .item {
        height: 86px;
        flex: 1;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 12px;
        border-radius: 4px;
        background-color: #fff;

        .text-num {
            .num {
                margin-top: 4px;
                font-size: 18px;
            }
        }
    }
}
</style>
